
<%@ page import="com.uniandes.modelviewer.dsl.XmiModel"%>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="../../css/examples.css" />
<link rel="stylesheet" type="text/css" href="../../css/UmlCanvas.css" />
<link rel="stylesheet"
	href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<meta name="layout" content="main">
<title>Model Web Visualization</title>
<style type="text/css" media="screen">
#status {
	background-color: #eee;
	border: .2em solid #fff;
	margin: 2em 2em 1em;
	padding: 1em;
	width: 12em;
	float: left;
	-moz-box-shadow: 0px 0px 1.25em #ccc;
	-webkit-box-shadow: 0px 0px 1.25em #ccc;
	box-shadow: 0px 0px 1.25em #ccc;
	-moz-border-radius: 0.6em;
	-webkit-border-radius: 0.6em;
	border-radius: 0.6em;
	text-align: center;
}

.ie6 #status {
	display: inline;
	/* float double margin fix http://www.positioniseverything.net/explorer/doubled-margin.html */
}

#status ul {
	font-size: 0.9em;
	list-style-type: none;
	margin-bottom: 0.6em;
	padding: 0;
}

#status li {
	line-height: 1.3;
}

#status h1 {
	text-transform: uppercase;
	font-size: 1.1em;
	margin: 0 0 0.3em;
}

#page-body {
	margin: 2em 1em 1.25em 18em;
}

h2 {
	margin-top: 1em;
	margin-bottom: 0.3em;
	font-size: 1em;
}

p {
	line-height: 1.5;
	margin: 0.25em 0;
}

#controller-list ul {
	list-style-position: inside;
}

#controller-list li {
	line-height: 1.3;
	list-style-position: inside;
	margin: 0.25em 0;
}

@media screen and (max-width: 480px) {
	#status {
		display: none;
	}
	#page-body {
		margin: 0 1em 1em;
	}
	#page-body h1 {
		margin-top: 0;
	}
}
</style>
</head>
<body>
<g:javascript src="includes2.js" />
<g:javascript src="_lib/jquery.js" />
<g:javascript src="_lib/jquery.cookie.js" />
<g:javascript src="_lib/jquery.hotkeys.js" />
<g:javascript src="jquery.jstree.js" />
<g:javascript src="_docs/syntax/!script.js" />
<script type="text/javascript">
		var jQuery_1= $.noConflict(true);
	</script>
	<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
	<script type="text/javascript">
		var jQuery_2= $.noConflict(true);
	</script>
	<div id="status" role="complementary">
		<h1>Meta Models</h1>
		<ul>
			<g:metaModelsList />
			<li><a>Process Metamodel</a></li>
			<li><a>Family Metamodel</a></li>
		</ul>
		<h1>Models</h1>
		<div id="modelList" class="demo" style="height: 100px;">
			<g:modelsList />
		</div>

		<g:classDescDivs/>
		<div id="dialog" title="Descripcion del Elemento" style="display:none">This is the default dialog
		which is useful for displaying information. The dialog window can be
		moved, resized and closed with the 'x' icon.</div>
		
		<g:javascript class="source below">

jQuery_1(function () {
	jQuery_1("#modelList")
		.jstree({ "plugins" : ["themes","html_data","ui"] })
		.bind("select_node.jstree", function (event, data) { 
			var id = data.rslt.obj.attr("id");
			var campos = id.split(".");
			var preffix = campos[0];
			if(preffix == "class")
			{
				var s = "#"+id+".d";
				var s2 = id+".d";
				var div = document.getElementById("dialog");
				var elem = document.getElementById(s2);
				console.log(document.getElementById(s2));
				div.innerHTML = elem.innerHTML;
				//jQuery_1("#dialog").html(""+document.getElementById(s2));
				jQuery_2( "#dialog" ).dialog();
			}
			else
			{
				window.location = "/GrailsModelViz/xmiModel/show/"+campos[1];
			}
		})

		.delegate("a", "click", function (event, data) { event.preventDefault(); })
});
		
		</g:javascript>
	<g:javascript>
		function changeDesc(idElem)
		{
			var elem = document.getElementById(idElem);
			var div = document.getElementById("dialog");
			div.innerHTML = elem.innerHTML;
			jQuery_2( "#dialog" ).dialog();			
		}
		</g:javascript>

	</div>
	<div id="page-body" role="main">
		<g:set var="last" value="${xmiModelInstanceList.size()-1}" />
		<g:each in="${xmiModelInstanceList.sort{a,b-> a.id.compareTo(b.id)} }">
		</g:each>
		<g:set var="xmiModelInstance" value="${xmiModelInstanceList[last]}" />
	<h1>${fieldValue(bean: xmiModelInstance, field: "name")}</h1>
		<canvas
			class="UmlCanvas Tabbed withConsole withSource withoutInspector"
			id="myModel" width="600" height="700"></canvas>
		<textarea id="UC_editor_for_myModel" style="display: none">
		${fieldValue(bean: xmiModelInstance, field: "modelDsl")}
		</textarea>
		<%--		--%>
	</div>
</body>
</html>
